<template>
  <div class="Settings">
    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/sportsShop' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运动商城系统</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>

    </div>

    <br>

    <!-- 用户信息 -->
    <div class="usershow">
      <!-- 头像 -->
      <img :src="userInfo.user_picture" alt="" srcset="">

      <!-- 详细信息 -->
      <div class="userInfo">
        <h1 style="color:#303133;font-size: 36px;">{{userInfo.username}}</h1>
        <br>
        <div>
          <el-tag>级别 lv:{{userInfo.level}}</el-tag> &nbsp;
          <el-tag type="warning">尊享: {{userInfo.grade}}</el-tag> &nbsp;
          <el-tag type="success">类型: {{userInfo.type}} 用户</el-tag> &nbsp;
          <!-- <el-tag type="danger">lv: {{userInfo.level}}</el-tag> -->
        </div>
        <br>
        <div>
          <h3 style="color:#606266"> 个性签名 <i class="el-icon-edit"></i>&nbsp; ：{{userInfo.state_message}}</h3>
        </div>
      </div>

      <!-- 超链接 -->
      <div class="ahref">
        <el-row>
          <el-button type="primary" icon="el-icon-s-promotion" circle></el-button>
          <el-button type="success" icon="el-icon-chat-dot-square" circle></el-button>
          <el-button type="warning" icon="el-icon-message" circle></el-button>
        </el-row>
      </div>
    </div>

    <!-- 财力展示，与购买数据 -->
    <div class="rich">
      <div class="rich_one">
        <h3>账户余额情况  ￥ {{userInfo.wallet}}</h3>
        <div style="width:100%;height:100%" id="main1"></div>
      </div>

      <div>
        <div class="rich_two">
          <h3>购物数据分析</h3>
          <div style="width:100%;height:100%" id="main2"></div>
        </div>
      </div>

    </div>
  </div>
</template>
  
<script>

export default {
  data() {
    return {
      // 存储 仪表盘的对象
      chartDom_yibiaopan: null,
      // 存储初始化 仪表盘对象
      myChart_yibiaopan: null,
      // 仪表盘 数据
      option_yibiaopan: {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '75%'],
            radius: '90%',
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.25, '#FF6E76'],
                  [0.5, '#FDDD60'],
                  [0.75, '#58D9F9'],
                  [1, '#7CFFB2']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '12%',
              width: 20,
              offsetCenter: [0, '-60%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            },
            axisLabel: {
              color: '#464646',
              fontSize: 20,
              distance: -60,
              rotate: 'tangential',
              formatter: function (value) {
                if (value === 0.875) {
                  return 'Grade A';
                } else if (value === 0.625) {
                  return 'Grade B';
                } else if (value === 0.375) {
                  return 'Grade C';
                } else if (value === 0.125) {
                  return 'Grade D';
                }
                return '';
              }
            },
            title: {
              offsetCenter: [0, '-10%'],
              fontSize: 20
            },
            detail: {
              fontSize: 30,
              offsetCenter: [0, '-35%'],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value * 100) + '';
              },
              color: 'auto'
            },
            data: [
              {
                value: 0.7,
                name: 'Grade Rating'
              }
            ]
          }
        ]
      },
      // 存储 大数据的对象
      chartDom_dashuju: null,
      // 存储初始化 大数据对象
      myChart_dashuju: null,
      // 大数据 分析
      option_dashuju: {
        title: {
          text: 'Temperature Change in the Coming Week'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: 'Highest',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: 'Lowest',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      },
      // 用户个人信息
      userInfo: {
        "grade": "vip",
        "level": 1,
        "password": "123456",
        "state_message": "这个人很懒，什么都没有留下",
        "type": "root",
        "user_id": 4,
        "user_picture": "http://192.168.123.53:8888/sports_shop_backend_war/users_picture/kzb68up.jpg",
        "username": "冰镇生鲜",
        "wallet": -6993
      }
    }
  },
  mounted() {
    // 初始化仪表盘
    this.chartDom_yibiaopan = document.getElementById('main1');
    this.myChart_yibiaopan = this.$echarts.init(this.chartDom_yibiaopan)
    this.myChart_yibiaopan.setOption(this.option_yibiaopan);

    // 初始化大数据
    this.chartDom_dashuju = document.getElementById('main2');
    this.myChart_dashuju = this.$echarts.init(this.chartDom_dashuju)
    this.myChart_dashuju.setOption(this.option_dashuju);

    // 加载用户个人信息
    this.getUserInfo()

    // 修改echart图表数据
  },
  methods: {
    getUserInfo() {
      this.$http({
        url: '/getUserInfo',
        params: {
          //键值对
          user_id: window.sessionStorage.getItem('user_id')
        },
        method: 'post'
      }).then(res => {
        // 登录成功判断，以及保存token
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取用户信息失败')
        } else {
          this.$message.success('获取用户信息成功')
          this.userInfo = res.data.data
        }
      }).catch(res => {
        console.log(res);
      })
    }
  }
}
</script>

<style>
/* 用户信息 */
.usershow {
  position: relative;
  height: 200px;
  width: 100%;
  background-color: #90939934;

  border-radius: 10px;
  border: 1px solid rgba(129, 129, 129, 0.508);
}

.usershow img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(129, 129, 129, 0.508);

  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
}

.userInfo {
  position: absolute;
  left: 200px;
  top: 50%;
  transform: translateY(-50%);
}

.ahref {
  position: absolute;
  right: 30px;
  top: 30px;
}

/* 财力展示与购买数据分析 */
.rich {
  margin-top: 20px;
  position: relative;
  height: 500px;
  width: 100%;
  background-color: #90939934;

  border-radius: 10px;
  border: 1px solid rgba(129, 129, 129, 0.242);
}

.rich_one {
  position: absolute;
  left: 30px;
  height: 100%;
  width: 40%;
  /* background-color: bisque; */
}

.rich_two {
  position: absolute;
  right: 30px;
  height: 100%;
  width: 60%;
  /* background-color: rgb(212, 255, 196); */
  padding-left: 5px;
  border-left: 1px solid rgba(168, 168, 168, 0.597);
}
</style>